import { message, Modal, Select, Table } from "antd";
import { connect } from "dva";
import moment from "moment";
import React from "react";
import enums from "./enums";
import { downloadFileByUrl } from "@/utils/utils";
import styles from "./index.less";
import MaskText from '@/components/MaskText'

const { Option } = Select;

@connect((state) => ({
  theme: state.theme,
  creditCar: state.creditCar,
}))
export default class ExportTaskModal extends React.PureComponent {
  state = {
    tableLoading: false,
    curPage: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    taskType: "MsCreditBusinessVehicleExport",
  };

  componentDidMount() {
    this.handleTableData();
  }

  handleSubmit = (msg) => {
    const { changeExportTaskModalVisible } = this.props;

    //TODO:请求接口

    changeExportTaskModalVisible(true);
  };

  handleTableData = () => {
    const { curPage, pageSize, taskType } = this.state;

    this.setState({
      tableLoading: true,
    });

    this.props.dispatch({
      type: "creditCar/getDataWithRes",
      payload: {
        url: "/mscreditbusiness/exporttask/page",
        ...{ page: curPage, size: pageSize, taskType: taskType },
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          if (
            response.data.rows.length === 0 &&
            response.data.pagination.current > 1
          ) {
            this.setState(
              {
                curPage: 1,
                pageSize: 10,
              },
              () => {
                this.handleTableData();
              }
            );
          } else {
            this.setState({
              tableData: response.data.rows,
              total: response.data.pagination.total,
            });
          }
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          tableLoading: false,
        });
      },
    });
  };

  render() {
    const {
      submitBntLading,
      tableData,
      tableLoading,
      curPage,
      pageSize,
      total,
    } = this.state;

    const { changeExportTaskModalVisible } = this.props;

    const columns = [
      {
        title: "操作时间",
        dataIndex: "createDate",
        render: (text) => {
          return moment(text).format("YYYY-MM-DD HH:mm:ss");
        },
      },
      {
        title: "操作类型",
        dataIndex: "type",
        render: (text, record) => {
          let findText = enums.platformThirdType.array.find(
            (e) => e.value === text
          );
          return findText ? findText.label : text;
        },
      },
      {
        title: '操作人',
        dataIndex: 'createBy',
        render(val) {
          return <MaskText text={val} type="name" />;
        }
      },
      {
        title: "状态",
        dataIndex: "status",
        render: (text, record) => {
          let findText = enums.taskStatus.array.find((e) => e.value === text);
          return findText ? findText.label : text;
        },
      },
      {
        title: "结果",
        dataIndex: "url",
        render: (text, record) => {
          if (text) {
            let findText = enums.platformThirdType.array.find(
              (e) => e.value === record.type
            );
            return (
              <a
                onClick={() => {
                  downloadFileByUrl(
                    text,
                    findText.title +
                      moment(record.createDate).format("YYYY-MM-DD HH:mm:ss") +
                      ".csv"
                  );
                }}
              >
                文件下载
              </a>
            );
          }
        },
      },
    ];

    const pagination = {
      showSizeChanger: true,
      total: total,
      current: curPage,
      pageSize: pageSize,
      showTotal: () => {
        return <span>共&nbsp;{total}&nbsp;条</span>;
      },
    };

    const tableProps = {
      columns,
      size: "small",
      pagination,
      rowKey: "sid",
      scroll: { x: "max-content" },
      loading: tableLoading,
      dataSource: tableData,
      onChange: (pagination) => {
        this.setState(
          {
            curPage: pagination.current,
            pageSize: pagination.pageSize,
          },
          () => {
            this.handleTableData();
          }
        );
      },
    };

    return (
      <Modal
        title="任务中心"
        onCancel={() => changeExportTaskModalVisible(false)}
        visible={true}
        footer={[]}
        width="770px"
      >
        <div className={styles.exportTaskModal}>
          <div>
            
          <div className={styles.pateoSearch}>
            <div className={styles.searchInputStr}>
              <div className={styles.title}>操作类型:</div>
                <Select
                  value={this.state.taskType}
                  placeholder="请选择操作类型"
                  onChange={(e) => {
                    this.setState({
                      taskType: e,
                    }, () => {
                      this.handleTableData();
                    });
                  }}
                >
                  {enums.platformThirdType.array.map((org) => {
                    return (
                      <Option key={org.value} value={org.value}>
                        {org.label}
                      </Option>
                    );
                  })}
                </Select>
              </div>
            </div>
          </div>
          <div className={styles.table}>
            <Table {...tableProps} />
          </div>
        </div>
      </Modal>
    );
  }
}
